<template>
    <div>
    <el-table border :data="list">
        <el-table-column label="Id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="生日" prop="birthday"></el-table-column>
        <el-table-column label="地址"  prop="location"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="操作" width="250" >
            <template slot-scope="scope">
                <el-button type="info" @click="editUser(scope.$index,scope.row)">编辑</el-button>
                <el-button type="danger" @click="deleteUser(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-dialog :visible.sync="viewVisible"  top="10px" width="50%" title="用户信息">
        <el-form style="position: relative;top: -15px" ref="form" :modal="form" label-position="left" >
            <el-row style="margin-bottom: 20px" :gutter="20">
                <el-col :span="8">
                    <el-form-item label="用户名:">
                        <el-input  v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="姓名:">
                        <el-input  v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px" :gutter="20">
                <el-col :span="8">
                    <el-form-item label="性别:">
                        <el-input  v-model="form.sex"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生日:">
                        <el-input  v-model="form.birthday"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px" :gutter="20">
                <el-col :span="8">
                    <el-form-item label="地址:">
                        <el-input  v-model="form.location"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮箱:">
                        <el-input  v-model="form.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer">
                <el-button @click="save">保存</el-button>
                <el-button @click="viewVisible=false">取消</el-button>
            </span>
    </el-dialog>
    </div>
</template>




<script>
import {editUser, fetchAllUser} from "../../api/tenantManagement";

const defaultList = {
    id:'',
    username:'',
    name:'',
    sex:'',
    birthday:'',
    location:'',
    email:'',
    avator:'',
    role:'',
    tel:'',
    password:'',
}

export default {
    name: "tenantManagement",
    data(){
        return{
            list:[],
            form:Object.assign({},defaultList),
            viewVisible:false,
        }
    },
    methods:{
        getAllUsers(){
            fetchAllUser().then(res=>{
                this.list=res.data.list;
            })
        },
        editUser(index,row){
            this.viewVisible=true;
            this.form=Object.assign({}, row);
        },
        save(){
            let form = {
                avator:this.form.avator,
            birthday:this.form.birthday,
            email:this.form.email,
            location:this.form.location,
            name:this.form.name,
            password:this.form.password,
            // role:this.form.role,
            sex:this.form.sex,
            tel:this.form.tel,
            username:this.form.username,
            }
            editUser(form).then(res =>{
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            })
        },
        deleteUser(index,row){
            this.$confirm('是否要删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'}).then(() =>{
                console.log(row.id)
            })
        }
    },
    created() {
        console.log("hhh")
        this.getAllUsers();
    }
}
</script>

<style scoped>

</style>